<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
  </head>
  <body>
    <!-- 定义模板得到vue管辖范围之外 -->
    <template id="itcast">
      <div>我是index-d</div>
    </template>
    <script type="x-template" id="heima">
      <div>我是index-e</div>
    </script>





    <div id="app">
      <!-- 使用组件就像是使用html标签一样 -->
      <index-a></index-a>
      <index-b></index-b>
      <index-c></index-c>
      <index-d></index-d>
      <index-e></index-e>
    </div>

  
    <script>
      // 组件的创建主要有三种方式
      // 注意：1. 模板template中只能有一个根节点;2. 组件的名字，如果采用驼峰命令的话，在使用的时候，
      // 就要加上 “-”，比如组件名字叫indexA，那么在使用的时候就叫index-a
      // 第一种：使用Vue.extend()和Vue.component()两个方法创建
      // Vue.extend()函数会返回一个组件的构造器，它里面包含一个参数，它是一个对象，里面是一些配置项
      // Vue.component()函数会利用Vue.extend()返回的构造器创建一个组件的实例，它有两个参数，一个是
      // 组件的名字，另一个组件的构造器
      var Index = Vue.extend({
        // 指定组件显示的模板
        template: "<div>我是首页</div>"
      })
      // 创建一个全局组件index-a
      Vue.component('indexA', Index)
      // 第二种：直接使用Vue.component()方法创建
      Vue.component('indexB', {
        template: '<div>我是index-b</div>'
      })
      // 也就是说Vue.component()这个方法本质上还是要调用Vue.extend()方法
      Vue.component('indexC',Vue.extend({
        // 指定组件显示的模板
        template: "<div>我是index-c</div>"
      }))
      // 第三种：通过指定模板创建
      Vue.component('indexD', {
        template: '#itcast'
      })
      Vue.component('indexE', {
        template: '#heima'
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })

      var Index = Vue.extend({
        template: "<div>我是首页</div>"
      })
      Vue.component('indexA', index)
      Vue.component('indexB', {
        template: '<div>我是index-b</div>'
      })
    </script>
  </body>
</html>